<template>
    <div class="employeeDetail">
        <div class="top-box">
            <div class="logo_language">
                <img class="logo" src="../assets/images/logo.png" alt="" />
                <div class="language" @click="setLang">
                    <img class="language_logo" src="../assets/images/zn.png" alt="" />
                    <span>{{ $t("language.name") }}</span>
                </div>
            </div>
        </div>
        <div class="content-box">
            <div class="card">
                <div class="input-item">
                    <p class="label">{{ $t("common.txt1") }}</p>
                    <div class="input-box">
                        <input type="text" class="input" v-model="info.chinese_name" />
                    </div>
                </div>
                <div class="input-item">
                    <p class="label">{{ $t("common.txt2") }}</p>
                    <div class="input-box">
                        <input type="text" class="input" v-model="info.english_name" />
                    </div>
                </div>
                <div class="input-item">
                    <p class="label">{{ $t("common.txt3") }}</p>
                    <div class="input-box">
                        <input type="text" class="input" v-model="info.user_account_id" />
                    </div>
                </div>
            </div>

            <div class="hos-card" v-for="(item, index) in info.hotels" :key="index">
                <div class="top-box1">
                    <p class="label">{{ $t("common.txt6") }}</p>
                    <img src="@/assets/images/delect.png" alt="" class="del" @click="delItem(index)" />
                </div>
                <div class="code-row">
                    <input type="text" class="code-input" :class="{ white: item.isAdd }" v-model="item.father_code" :readonly="!item.isAdd" />
                    <van-popover v-model="showPopover[index]" trigger="click" v-if="!item.isAdd" @open="clearTxt">
                        <div class="popover-box">
                            <p class="lable">{{ $t("common.txt7") }}</p>
                            <div class="code-row">
                                <input type="text" class="input" :placeholder="$t('common.txt8')" v-model="search" />
                                <div class="search-btn" @click="searchHotels">{{ $t("common.txt9") }}</div>
                            </div>
                            <p class="lable">{{ $t("common.txt10") }}</p>
                            <div class="show-row">
                                {{ cusrHotel.title }}
                            </div>
                            <div class="btn-ok" @click="setHotel(index)" v-if="cusrHotel.title">{{ $t("common.txt11") }}</div>
                        </div>
                        <template #reference>
                            <div class="btn">{{ $t("common.txt12") }}</div>
                        </template>
                    </van-popover>
                    <div v-if="item.isAdd" class="btn" @click="searchAddHotels(item, index)">{{ $t("common.txt13") }}</div>
                </div>

                <div class="card-item">
                    <p class="label">{{ $t("common.txt10") }}</p>
                    <div class="box">
                        <input type="text" class="input" v-model="item.father" readonly />
                    </div>
                </div>
                <div class="card-item white" v-if="item.sons">
                    <p class="label">{{ $t("common.txt14") }}</p>
                    <div class="box" @click="showProp(item, index)">
                        <input type="text" class="input" v-model="item.self" readonly />
                        <img src="@/assets/images/right.png" alt="" class="icon" />
                    </div>
                </div>
            </div>

            <div class="card">
                <!-- 原先根据部门获取数据 -->
                <!-- <div class="input-item">
                    <p class="label">{{ $t("common.txt4") }}</p>
                    <div class="input-box" @click="show3 = true">
                        <input type="text" class="input" v-model="info.eu_job" readonly />
                        <img src="@/assets/images/right.png" alt="" class="icon" />
                    </div>
                </div> -->
                <div class="input-item">
                    <p class="label">{{ $t("common.txt4") }}</p>
                    <div class="input-box">
                        <input type="text" class="input" v-model="info.eu_job" />
                    </div>
                </div>
                <div class="input-item">
                    <p class="label">{{ $t("common.txt5") }}</p>
                    <div class="input-box">
                        <input type="text" class="input" v-model="info.email" />
                    </div>
                </div>
            </div>

            <div class="add-btn" @click="addHotels">
                <img src="../assets/images/add.png" alt="" class="img" />
                {{ $t("common.txt15") }}
            </div>
            <div class="tips-box">
                <p class="title"><span style="color: red">*</span>{{ $t("common.txt17") }}</p>
                <p class="tips">{{ $t("common.txt18") }}</p>
                <p class="tips">{{ $t("common.txt19") }}</p>
                <p class="tips">{{ $t("common.txt20") }}</p>
            </div>
            <div class="submit-btn" @click="handleSubmit">
                {{ $t("common.txt16") }}
            </div>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ width: '100%' }">
            <van-picker :title="$t('common.txt21')" show-toolbar value-key="title" :columns="columns" @confirm="onConfirm" @cancel="show = false" />
        </van-popup>
        <!-- 选择职位 -->
        <!-- <van-popup v-model="show3" position="bottom" :style="{ width: '100%' }">
            <van-picker :title="$t('common.txt22')" show-toolbar value-key="eu_title" :columns="columnsJob" @confirm="onConfirmJob" @cancel="show3 = false" />
        </van-popup> -->
        <van-popup v-model="show1">
            <div class="end-box">
                <img src="@/assets/img_06.png" alt="" class="img" />
                <p class="title">{{ $t("common.txt23") }}</p>
                <p class="tips">{{ $t("common.txt24") }}</p>
            </div>
        </van-popup>
        <van-popup v-model="show2">
            <div class="end-box">
                <img src="@/assets/img_10.png" alt="" class="img" />
                <p class="title">{{ $t("common.txt25") }}</p>
                <p class="tips"></p>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
    name: "employeeDetail",
    data() {
        return {
            showPopover: [],
            show: false,
            show1: false,
            show2: false,
            show3: false,
            info: {},
            search: "",
            cusrHotel: {},
            columns: [],
            columnsJob: [],
            curIndex: "",
        };
    },
    mounted() {
        this.onLoad();
    },
    methods: {
        setLang() {
            if (this.$t("language.name") == "English") {
                this.$i18n.locale = "en";
            } else {
                this.$i18n.locale = "zh";
            }
        },
        onLoad() {
            this.info = JSON.parse(decodeURIComponent(this.$route.query.info));
            // console.log(this.info)
            this.info.hotels.forEach((item, index) => {
                this.$api
                    .depart({
                        hotel_code: item.father_code,
                    })
                    .then((res) => {
                        if (res.code == 1 && res.data) {
                            this.$set(this.info.hotels[index], "sons", res.data.sons);
                            // if (index == 0) {
                            //     const val = res.data.sons.find((item) => item.title == this.info.hotels[index].self);
                            //     this.getJob(val.cn_title);
                            // }
                        }
                    });
            });
        },
        clearTxt() {
            this.cusrHotel = {};
            this.search = "";
        },
        getJob(name) {
            this.$api
                .job_from_depart({
                    depart_name: name,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.columnsJob = res.data;
                    }
                });
        },
        handleSubmit() {
            let info = this.info;
            if (!info.chinese_name) {
                Toast(this.$t("common.txt26"));
                return;
            }
            if (!info.english_name) {
                Toast(this.$t("common.txt27"));
                return;
            }
            if (!info.user_account_id) {
                Toast(this.$t("common.txt28"));
                return;
            }
            if (!info.eu_job) {
                Toast(this.$t("common.txt29"));
                return;
            }
            if (!info.email) {
                Toast(this.$t("common.txt30"));
                return;
            }
            info.hotels.forEach((item) => {
                if (!item.father_code) {
                    Toast(this.$t("common.txt31"));
                    throw SyntaxError("酒店不能为空");
                }
                if (!item.self_id) {
                    Toast(this.$t("common.txt32"));
                    throw SyntaxError("部门不能为空");
                }
            });
            Toast.loading({
                forbidClick: true,
                duration: 0,
            });
            this.$api
                .check({
                    user_id: info.id,
                    email: info.email,
                    user_account_id: info.user_account_id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$api
                            .user_edit({
                                chinese_name: info.chinese_name,
                                english_name: info.english_name,
                                user_account_id: info.user_account_id,
                                eu_job: info.eu_job,
                                email: info.email,
                                user_id: info.id,
                                department: info.hotels.map((item) => item.self_id).join(","),
                            })
                            .then((res) => {
                                Toast.clear();
                                if (res.code == 1) {
                                    const oldInfo = JSON.parse(decodeURIComponent(this.$route.query.info));
                                    // if (oldInfo.hotels.length != info.hotels.length) {
                                    //   this.show1 = true
                                    //   return
                                    // }
                                    // info.hotels.forEach((item, index) => {
                                    //   if (!oldInfo.hotels[index] || item.self_id != oldInfo.hotels[index].self_id) {
                                    //     this.show1 = true
                                    //     throw SyntaxError();
                                    //   }
                                    // })
                                    this.show2 = true;
                                } else {
                                    if (res.msg == "您并未提交更改信息，请修改后再提交" && this.$t("language.name") == "中文") {
                                        Toast("No information changed, please modify and submit again");
                                    } else {
                                        Toast(res.msg);
                                    }
                                }
                            });
                    } else {
                        Toast.clear();
                        Dialog.alert({
                            title: this.$t("common.txt33"),
                            message: res.msg,
                            confirmButtonText: this.$t("common.txt34"),
                            confirmButtonColor: "#000",
                        }).then(() => {
                            // on close
                        });
                    }
                });
        },
        showProp(item, index) {
            this.columns = item.sons;
            this.curIndex = index;
            this.show = true;
        },
        onConfirmJob(value, index) {
            this.info.eu_job = value.eu_title;
            this.show3 = false;
        },
        onConfirm(value, index) {
            this.$set(this.info.hotels[this.curIndex], "self", value.title);
            this.$set(this.info.hotels[this.curIndex], "self_id", value.id);
            // if (this.curIndex == 0) {
            //     this.getJob(value.cn_title);
            //     this.columnsJob = [];
            //     this.info.eu_job = "";
            // }
            this.show = false;
        },
        searchAddHotels(item, index) {
            Toast.loading({
                forbidClick: true,
                duration: 0,
            });
            this.$api
                .depart({
                    hotel_code: item.father_code,
                })
                .then((res) => {
                    Toast.clear();
                    if (res.code == 1 && res.data) {
                        this.$set(this.info.hotels, index, {
                            isAdd: true,
                            father: res.data.title,
                            father_code: res.data.hotel,
                            self: "",
                            self_id: "",
                            sons: res.data.sons,
                        });
                    }
                });
        },
        searchHotels() {
            Toast.loading({
                forbidClick: true,
                duration: 0,
            });
            this.$api
                .depart({
                    hotel_code: this.search,
                })
                .then((res) => {
                    Toast.clear();
                    if (res.code == 1 && res.data) {
                        this.cusrHotel = res.data;
                    } else {
                        this.cusrHotel = {};
                    }
                });
        },
        setHotel(index) {
            if (!this.cusrHotel.title) {
                return;
            }
            this.info.hotels[index] = {
                father: this.cusrHotel.title,
                father_code: this.cusrHotel.hotel,
                self: "",
                self_id: "",
                sons: this.cusrHotel.sons,
            };
            if (index == 0) {
                this.columnsJob = [];
                this.info.eu_job = "";
            }
            this.cusrHotel = {};
            this.search = "";
            this.showPopover[index] = false;
        },
        delItem(index) {
            if (this.info.hotels.length <= 1) {
                Toast(this.$t("common.txt35"));
            } else {
                this.info.hotels.splice(index, 1);
                // if (index == 0) {
                //     this.columnsJob = [];
                //     this.info.eu_job = "";
                //     if (this.info.hotels[0].self) {
                //         const val = this.info.hotels[0].sons.find((item) => item.title == this.info.hotels[0].self);
                //         this.getJob(val.cn_title);
                //     }
                // }
            }
        },
        //添加酒店
        addHotels() {
            this.info.hotels.push({
                isAdd: true,
                father: "",
                father_code: "",
                self: "",
                self_id: "",
                sons: null,
            });
        },
    },
    // watch: {
    //   $route: {
    //     handler: function () {
    //       this.type = "";
    //       this.region = "";
    //       this.province = "";
    //       this.city = "";
    //       this.getList();
    //     },
    //     immediate: true,
    //   },
    // },
    filters: {
        percentage(num) {
            if (!(num * 1)) {
                return "0%";
            }
            let data = Math.floor(num * 100);
            return data + "%";
        },
    },
};
</script>

<style lang="scss">
.end-box {
    width: 5.92rem;
    height: 4.93rem;
    border-radius: 0.11rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    img.img {
        width: 1.6rem;
        height: 1.6rem;
        margin-bottom: 0.48rem;
    }

    p.title {
        font-size: 0.4rem;
        font-weight: bold;
        margin-bottom: 0.19rem;
    }

    p.tips {
        font-size: 0.27rem;
        color: #a0a0a0;
    }
}

.popover-box {
    width: calc(100vw - 1.33rem);
    padding: 0.51rem;
    background: #fffbf7;
    p.lable {
        color: #8b899e;
        margin-bottom: 0.24rem;
    }

    .code-row {
        display: flex;
        align-items: center;
        margin-bottom: 0.45rem;

        input.input {
            flex: 1;
            border: 1px solid #c99d6a;
            line-height: 0.91rem;
            border-radius: 0.08rem;
            padding: 0 0.32rem;
            background: #fff8ef;
            color: #060143;
        }

        .search-btn {
            width: 2.45rem;
            height: 0.93rem;
            line-height: 0.93rem;
            text-align: center;
            background: linear-gradient(90deg, #f7c88f, #b78d5b);
            margin-left: 0.08rem;
            border-radius: 0.08rem;
            font-size: 0.37rem;
            color: #fff;
        }
    }

    .show-row {
        height: 0.93rem;
        line-height: 0.93rem;
        background-color: #fff8ef;
        border-radius: 0.11rem;
        font-size: 12px;
        padding: 0 0.32rem;
        border: 1px solid #c99d6a;
    }

    .btn-ok {
        width: 100%;
        height: 0.93rem;
        line-height: 0.93rem;
        text-align: center;
        background-color: #e8542c;
        margin-left: 0.08rem;
        border-radius: 0.11rem;
        font-size: 0.37rem;
        color: #fff;
        margin-top: 0.4rem;
    }
}

.van-popover {
    left: 0.67rem !important;
}

.van-popover__arrow {
    left: 90% !important;
    // border: 1px solid #e8542c;
    color: #c99d6a !important;
}

.van-popover__content {
    border: 1px solid #c99d6a;

    border-radius: 0.08rem;
}
</style>
<style lang="scss" scoped>
.employeeDetail {
    min-height: 100vh;
    background-color: #f5f5fa;

    .top-box {
        width: 100%;
        height: 1.5067rem;
        background-color: #060143;
        padding: 0.3867rem 0.4rem 0 0.4rem;
        .logo_language {
            width: 100%;
            height: 0.7333rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.3467rem;
            color: #fff;
            font-weight: 500;
            font-family: Source Han Sans CN;
            .logo {
                width: 0.9067rem;
                height: 100%;
            }

            .language {
                display: flex;
                align-items: center;
                .language_logo {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.1333rem;
                }
            }
        }
    }
    .content-box {
        height: calc(100vh - 1.5067rem);
        overflow: auto;
        padding: 0.4rem 0.4rem 0.9333rem;
        .card {
            background: #fff;
            border-radius: 0.16rem;
            padding: 0.5333rem 0.4rem 0.2667rem 0.4rem;
        }
        .input-item {
            font-size: 14px;
            margin-bottom: 0.5333rem;

            p.label {
                color: #8b899e;
                font-size: 0.3733rem;
                font-weight: 400;
                font-family: Source Han Sans CN;
                margin-bottom: 0.3867rem;
            }

            .input-box {
                display: flex;
                background-color: #f5f5fa;
                border-radius: 0.16rem;
                padding: 0 0.32rem;
                align-items: center;

                .input {
                    flex: 1;
                    line-height: 0.91rem;
                    height: 1.12rem;
                    background-color: #f5f5fa;
                    color: #060143;
                }

                .icon {
                    width: 0.1507rem;
                    height: 0.264rem;
                }
            }
        }

        .hos-card {
            padding: 0.4rem 0.27rem;
            background-color: #fff;
            margin: 0.4rem 0;
            border-radius: 0.16rem;
            .top-box1 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 0.21rem;

                .label {
                    color: #060143;
                    font-size: 0.3733rem;
                    font-weight: bold;
                    font-family: Source Han Sans CN;
                }

                .del {
                    width: 0.4rem;
                    height: 0.4rem;
                }
            }

            .code-row {
                display: flex;
                margin-bottom: 0.45rem;

                input.code-input {
                    flex: 1;
                    height: 0.9867rem;
                    border-radius: 0.11rem;
                    background-color: #eeedf5;
                    padding: 0 0.32rem;

                    &.white {
                        background: #eeedf5;
                    }
                }

                .btn {
                    height: 0.93rem;
                    width: 2.19rem;
                    border-radius: 0.11rem;
                    background-color: #060143;
                    line-height: 0.93rem;
                    text-align: center;
                    color: #fff;
                    margin-left: 0.27rem;
                }
            }

            .card-item {
                margin-bottom: 0.45rem;

                .label {
                    margin-bottom: 0.21rem;
                    color: #a0a0a0;
                }

                &.white {
                    .box {
                        background-color: #eeedf5;
                        overflow: hidden;

                        .input {
                            background-color: #eeedf5;
                            color: #060143;
                        }
                    }
                }

                .box {
                    height: 1.12rem;
                    border-radius: 0.11rem;
                    background-color: #eeedf5;
                    padding: 0 0.32rem;
                    display: flex;
                    align-items: center;

                    .input {
                        flex: 1;
                        color: #060143;
                        line-height: 0.93rem;
                        background-color: #eeedf5;
                    }

                    .icon {
                        width: 0.1507rem;
                        height: 0.264rem;
                    }
                }
            }
        }

        .add-btn {
            height: 1.3067rem;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px dotted #060143;
            border-radius: 0.16rem;
            color: #060143;
            margin-top: 0.5333rem;
            font-size: 0.3733rem;
            font-weight: 400;

            img.img {
                width: 0.4667rem;
                height: 0.4667rem;
                margin-right: 0.2667rem;
                background-color: #060143;
            }
        }

        .submit-btn {
            height: 1.12rem;
            color: #fff;
            background: linear-gradient(90deg, #f7c88f, #b78d5b);
            border-radius: 0.5733rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
            margin-top: 0.6533rem;
            font-size: 0.4533rem;
            font-weight: 500;
        }

        .tips-box {
            margin-top: 0.5333rem;
            .title {
                margin-bottom: 0.5333rem;
                color: #060143;
                font-size: 0.4267rem;
                font-weight: bold;
                font-family: Source Han Sans CN;
            }

            p.tips {
                color: #c6c5d6;
                line-height: 0.64rem;
                font-size: 0.3733rem;
                font-family: Source Han Sans CN;
                font-weight: 400;
            }
        }
    }
}
</style>
